<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --background-color: #ecf0f1;
            --text-color: #333;
            --error-color: #e74c3c;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #3498db, #2c3e50);
            animation: gradient 15s ease infinite;
            background-size: 400% 400%;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        form {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h2 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 25px;
            font-weight: 600;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-color);
            font-weight: 500;
            font-size: 0.9rem;
        }

        input {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        input:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        input[type="submit"] {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 14px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        input[type="submit"]:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }

        input[type="submit"]:active {
            transform: translateY(0);
        }

        input[type="submit"]:disabled {
            background-color: #a0cfff;
            cursor: not-allowed;
        }

        a {
            display: block;
            text-align: center;
            color: var(--secondary-color);
            text-decoration: none;
            margin-top: 15px;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #2980b9;
            text-decoration: underline;
        }

        .error-message {
            color: var(--error-color);
            margin-bottom: 15px;
            text-align: center;
            font-size: 0.9rem;
        }

        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }

        .remember-me input {
            width: auto;
            margin-bottom: 0;
            margin-right: 8px;
        }

        .loading {
            position: relative;
        }

        .loading::after {
            content: "";
            position: absolute;
            right: 15px;
            top: 50%;
            width: 20px;
            height: 20px;
            border: 3px solid #fff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
            transform: translateY(-50%);
        }

        @keyframes spin {
            to {
                transform: translateY(-50%) rotate(360deg);
            }
        }
        /* 验证码整体容器样式 */
        .captcha-wrapper {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }
        /* 验证码显示与刷新按钮容器样式 */
        .captcha-display {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        #captcha {
            flex: 1;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: bold;
            text-align: center;
            letter-spacing: 4px;
            background-color: #f0f0f0;
        }
        #refreshCaptcha {
            padding: 12px;
            border: none;
            border-radius: 8px;
            background-color: var(--secondary-color);
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        #refreshCaptcha:hover {
            background-color: #2980b9;
        }
        /* 验证码输入框样式 */
        .captcha-input-group {
            display: flex;
            gap: 10px;
        }
        .captcha-input-group input {
            flex: 1;
            margin-bottom: 0;
        }
        .captcha-error {
            color: var(--error-color);
            margin-top: 5px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
<form th:action="@{/user/login}" method="post" onsubmit="return handleSubmit(event)">
    <h2>欢迎登录</h2>
    <span id="loginErrorMsg" th:text="${msg}" style="color: red;font-size: 18px"></span>
    <div class="error-message" id="errorMessage" th:if="${param.error}" th:text="${param.error}"></div>
    <label for="username">用户名</label>
    <input type="text" id="username" name="username" required placeholder="请输入您的用户名">
    <label for="password">密码</label>
    <input type="password" id="password" name="passwordHash" required placeholder="请输入您的密码">
    <div class="captcha-wrapper">
        <label for="captchaInput">验证码</label>
        <div class="captcha-display">
            <div id="captcha"></div>
            <button type="button" id="refreshCaptcha">刷新</button>
        </div>
        <div class="captcha-input-group">
            <input type="text" id="captchaInput" name="captcha" required placeholder="请输入验证码">
        </div>
    </div>
    <div id="captchaError" class="captcha-error" style="display: none;"></div>
    <div class="remember-me">
        <input type="checkbox" id="rememberMe" name="rememberMe">
        <label for="rememberMe">记住我</label>
    </div>
    <input type="submit" value="登录" id="submitButton" name="submitButton">
    <a th:href="@{/user/register}">没有账号？立即注册</a>
</form>
<script>
    let captchaText = '';

    // 生成验证码
    function generateCaptcha() {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        captchaText = '';
        for (let i = 0; i < 6; i++) {
            captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        document.getElementById('captcha').textContent = captchaText;
    }

    // 验证验证码
    function validateCaptcha() {
        const captchaInput = document.getElementById('captchaInput').value;
        return captchaInput === captchaText;
    }

    function handleSubmit(event) {
        try {
            event.preventDefault();
            const submitButton = document.getElementById('submitButton');
            const errorMessage = document.getElementById('errorMessage');
            const captchaError = document.getElementById('captchaError');

            if (errorMessage) {
                errorMessage.textContent = '';
            }
            captchaError.style.display = 'none';
            if (!validateCaptcha()) {
                captchaError.textContent = '验证码输入错误，请重新输入';
                captchaError.style.display = 'block';
                generateCaptcha();
                return false;
            }
            submitButton.disabled = true;
            submitButton.classList.add('loading');

            setTimeout(() => {
                submitButton.disabled = false;
                submitButton.classList.remove('loading');
                event.target.submit();
            }, 300);
            return true;
        } catch (error) {
            console.error('提交表单时发生错误:', error);
            const errorMessage = document.getElementById('errorMessage');
            if (errorMessage) {
                errorMessage.textContent = '提交表单时发生错误，请稍后再试';
            }
            return false;
        }

    }

    window.addEventListener('load', function () {
        const loginErrorMsg = document.getElementById('loginErrorMsg');
        if (loginErrorMsg) {
            setTimeout(() => {
                loginErrorMsg.style.display = 'none';
            },3000);
        }
    });

    // 初始化验证码
    generateCaptcha();

    // 绑定刷新验证码事件
    document.getElementById('refreshCaptcha').addEventListener('click', generateCaptcha);
</script>
</body>
</html>